<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <span slot="bread">积分兑换</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
<!--          <span class="sortby">排序:</span>-->
<!--          <a href="javascript:void(0)" class="price" @click="sortGoods">价格-->
<!--            <svg class="icon-arrow-short" v-bind:class="{'sort-up':!sortFlag}">-->
<!--              <use xlink:href="#icon-arrow-short">-->
<!--                <svg id="icon-arrow-short" viewBox="0 0 25 32" width="100%" height="100%">-->
<!--                  <title>arrow-short</title>-->
<!--                  <path-->
<!--                    d="M24.487 18.922l-1.948-1.948-8.904 8.904v-25.878h-2.783v25.878l-8.904-8.904-1.948 1.948 12.243 12.243z"-->
<!--                    class="path1"></path>-->
<!--                </svg>-->
<!--              </use>-->
<!--            </svg>-->
<!--          </a>-->
          <!--          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>-->
          <span>您的积分为：{{this.points}}</span>
        </div>

        <div class="accessory-result">

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="item in goodsList">
                  <div class="pic">
                    <a href="#" :title="item.FDays"><img :src="('http://localhost:8080/file/image/'+item['image'] )" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.name}}</div>
                    <div class="source">原产地：{{item.source}}</div>
                    <div class="price">所需积分：{{item.price}}</div>
                    <div class="stock" style="position: relative;left: 15%">库存：{{item.stock}}件</div>
                    <div style="display:inline-block;transform: translate3d(4%,25%,0);position: relative;">
                      <el-form  style="width: 30%;display:inline-block">
                        <el-form-item style="width: 20%">
                          <el-input-number size="mini" v-model="item.weight" :min="1" :max="10" label="添加数量" style="position: relative;left:-100%;width: 700%"></el-input-number>
                        </el-form-item>
                      </el-form>
                      <a href="javascript:;" style="width: 60%;position:relative;left: 7%;display:inline-block;border-radius: 20px" class="btn btn--m" @click="addCart(item.id,item.price,item.weight)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
                   infinite-scroll-distance="20">
                <img src="./../../static/loading-svg/loading-spinning-bubbles.svg" v-show="loading">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
          <svg id="icon-status-ok" viewBox="0 0 32 32" width="100%" height="100%"><title>status-ok</title>
            <path
              d="M22.361 10.903l-9.71 9.063-2.998-2.998c-0.208-0.209-0.546-0.209-0.754 0s-0.208 0.546 0 0.754l3.363 3.363c0.104 0.104 0.241 0.156 0.377 0.156 0.131 0 0.261-0.048 0.364-0.143l10.087-9.414c0.215-0.201 0.227-0.539 0.026-0.754s-0.539-0.226-0.754-0.026z"
              class="path1"></path>
            <path
              d="M16 30.933c-8.234 0-14.933-6.699-14.933-14.933s6.699-14.933 14.933-14.933c8.234 0 14.933 6.699 14.933 14.933s-6.699 14.933-14.933 14.933zM16 0c-8.822 0-16 7.178-16 16 0 8.823 7.178 16 16 16s16-7.177 16-16c0-8.822-7.178-16-16-16z"
              class="path2"></path>
            <title>status-ok</title>
            <path
              d="M22.361 10.903l-9.71 9.063-2.998-2.998c-0.208-0.209-0.546-0.209-0.754 0s-0.208 0.546 0 0.754l3.363 3.363c0.104 0.104 0.241 0.156 0.377 0.156 0.131 0 0.261-0.048 0.364-0.143l10.087-9.414c0.215-0.201 0.227-0.539 0.026-0.754s-0.539-0.226-0.754-0.026z"
              class="path1"></path>
            <path
              d="M16 30.933c-8.234 0-14.933-6.699-14.933-14.933s6.699-14.933 14.933-14.933c8.234 0 14.933 6.699 14.933 14.933s-6.699 14.933-14.933 14.933zM16 0c-8.822 0-16 7.178-16 16 0 8.823 7.178 16 16 16s16-7.177 16-16c0-8.822-7.178-16-16-16z"
              class="path2"></path>
          </svg>
        </svg>
        <span>加入购物车成功！</span>
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShowCart=false">继续挑选</a>
        <router-link class="btn btn--m" href="javascript:;" to="/cart">查看购物车</router-link>
      </div>
    </modal>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import NavHeader from "./../components/NavHeader";
import NavFooter from "./../components/NavFooter";
import NavBread from "./../components/NavBread";
import Modal from "./../components/Modal";
import axios from "axios"
import FruitInfoModal from "../components/FruitInfoModal.vue";

export default {
  data() {
    return {
      temp:1,     //1:执行获取所有，2:执行查询
      goodsList: [],
      priceChecked: null,
      filterBy: false,
      overLayFlag: false,
      busy: true,
      sortFlag: true, //代表升序
      page: 1,
      size: 8,
      loading: false,
      mdShow: false,
      mdShowCart: false,
      currentItem: {},
      currentPage:1,
      pageSize:5,
      total:0,
      currenFruitId:"",
      appraises:[],
      points:0
    };
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal,
    FruitInfoModal
  },
  mounted: function() {
    this.getPoints();
    this.getGoodsList();
  },
  methods: {
    //获得用户积分
    getPoints(){
      axios.get("customer/memberEdit?id="+JSON.parse(sessionStorage.getItem("user")).id)
        .then(res => {
          console.log(res);
          this.points = res.data.integral;
        })
    },
    //获得所有水果信息
    getGoodsList(flag) {
      this.temp = 1;
      this.key = null;
      this.loading = true;
      var params = {
        currentPage: this.page,
        pageSize: this.size,
        sort: this.sortFlag ? 1 : -1,
      };
      axios.post('/fruit/getAllGift',params)
        .then(result => {
          this.loading = false;
          var res = result.data;
          if (result.status === 200) {
            var tempGoodslist = [];
            if (flag) {
              tempGoodslist = res.data;
              this.goodsList = this.goodsList.concat(tempGoodslist);
              if (tempGoodslist === 0) {
                this.busy = true;
              } else {
                this.busy = false;
              }
            } else {
              tempGoodslist = res.data;
              this.goodsList = tempGoodslist;
              this.busy = false;
            }
          } else {
            this.goodsList = [];
          }
        })
        .catch(function(error) {
          console.log("error init." + error);
        });
    },
    showFilterPop() {
      this.filterBy = true;
      this.overLayFlag = true;
    },
    closePop() {
      this.filterBy = false;
      this.overLayFlag = false;
    },
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        if (this.temp === 1) {
          this.page++;
          this.getGoodsList(true);
        }
      }, 500);
    },
    sortGoods() {
      this.sortFlag = !this.sortFlag;
      this.page = 1;
      if (this.temp === 1){
        this.getGoodsList();
      }else {
        this.getGoodsList();
      }
    },
    //加入购物车
    addCart(fruitId, price, weight) {
      if(sessionStorage.getItem("user") != null){
        if (price * weight > this.points){
          this.$message.warning("积分不足！！！");
        }else {
          var params = {
            customerId:JSON.parse(sessionStorage.getItem("user")).id,
            fruitId: fruitId,
            weight: weight
          };
          axios.post("/customer/addCart", params,{ headers:{content:"application/json;charset=UTF-8" }})
            .then(result => {
              var res = result.data;
              if (res.code === 0) {
                console.log(this.mdShowCart);
                this.mdShowCart = true;
                this.$store.commit("updateCartCount", 1);
              } else {
                this.mdShow = true;
              }
            })
            .catch(function(error) {
              console.log("error init." + error);
            });
        }
      }else {
        this.overLayFlag = true;
      }
    },
    closeModal() {
      this.mdShow = false;
      this.mdShowCart = false;
      this.overLayFlag = false;
    },
    //每页显示条数改变触发的函数
    handleSizeChange(val) {
      //保存每页显示的条数
      this.pageSize = val;
      //调用分页函数
      this.getAppraise(this.currenFruitId);
    },
    //当前页码改变触发的函数
    handleCurrentChange(val) {
      //保存当前页码
      this.currentPage = val;
      //调用分页函数
      this.getAppraise(this.currenFruitId);
    }
  },
  //过滤器
  filters: {
    //过滤时间的函数
    filterCtime(ctime) {
      return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
    }
  }
};
</script>

<style>
.image{
  position: relative;
  top: -30%;
  left: 50%;
  transform: translateY(-30%);
}
.message p{
  height: 30px;
  font-size: 20px;
  font-family: 黑体;
}
.load-more {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.sort-up {
  transform: rotate(180deg);
  transition: all 0.3s ease-out;
}

.icon-arrow-short {
  width: 11px;
  height: 11px;
  transition: all 0.3s ease-out;
}
</style>
